<template>
    <div class="vue-avatar--wrapper" :class="{'circle': shape == 'circle'}" :style="[style, customStyle]" aria-hidden="true">
        <span v-if="!this.isImage">{{ userInitial }}</span>
        <img :class="{'circle': shape == 'circle'}" v-lazy="src" v-else>
    </div>
</template>

<script>
    export default {
        name: 'vueAvatar', // 图标组件
        props: {
            username: {
                type: String
            },
            src: {
                type: String
            },
            size: {
                type: Number,
                default: 38
            },
            initials: {
                type: String
            },
            backgroundColor: { // 背景色
                type: String
            },
            color: { // 字体颜色
                type: String
            },
            customStyle: {
                type: Object
            },
            inline: {
                type: Boolean
            },
            shape: String, // 形状   circle圆形  square方形
        },
        data() {
            return {
                backgroundColors: [
                    '#39ba5d',
                    '#22d7bb',
                    '#2cccda',
                    '#18bfa4',
                    '#ff7747',
                    '#2dbcff',
                    '#9473fd',
                    '#c472ee',
                    '#99d75a',
                    '#ef7ede',
                    '#f969aa',
                    '#fc587b',
                    '#ffa415',
                    '#7076fa',
                    '#4e8af9',
                    '#ffd234',
                    '#66c060',
                    '#dddddd',
                ]
            }
        },
        mounted() {
            if (!this.isImage) {
                this.$emit('avatar-initials', this.username, this.userInitial)
            }
        },
        computed: {
            background() {
                if (!this.isImage) {
                    return this.backgroundColor || this.randomBackgroundColor(this.username.length, this
                        .backgroundColors)
                }
            },
            isImage() {
                return Boolean(this.src)
            },
            style() {
                const style = {
                    display: this.inline ? 'inline-flex' : 'flex',
                    width: `${this.size}px`,
                    height: `${this.size}px`,
                    borderRadius: '3px',
                    lineHeight: `${(this.size + Math.floor(this.size / 20))}px`,
                    fontWeight: 'bold',
                    alignItems: 'center',
                    justifyContent: 'center',
                    textAlign: 'center'
                }
                const initialBackgroundAndFontStyle = {
                    backgroundColor: this.background,
                    font: `${Math.floor(this.size / 2.5)}px/${this.size}px Helvetica, Arial, sans-serif`,
                    color: this.color || '#fff'
                }
                const backgroundAndFontStyle = (this.isImage) ?
                    {} :
                    initialBackgroundAndFontStyle
                Object.assign(style, backgroundAndFontStyle)
                return style
            },
            userInitial() {
                if (!this.isImage) {
                    const initials = this.initials || this.initial(this.username)
                    return initials
                }
                return ''
            }
        },
        methods: {
            initial(username) {
                let parts = username.split('')
                let initials = ''
                for (var i = 0; i < parts.length; i++) {
                    initials += parts[i].charAt(0)
                }
                if (initials.length > 2 && initials.search(/[A-Z]/) !== -1) {
                    initials = initials.replace(/[a-z]+/g, '')
                }
                initials = initials.substr(0, 2).toUpperCase()
                return initials
            },
            randomBackgroundColor(seed, colors) {
                return colors[seed % (colors.length)]
            },
        }
    }

</script>

<style lang="scss" scoped>
.vue-avatar--wrapper {
    &.circle {
        border-radius: 50% !important;
    }
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        &.circle {
            border-radius: 50%;
        }
    }
}
</style>
